<template>
  <div class="login-container">
    <div
      id="main1"
      :style="{ width: '95%', height: '350px' }"
    />
  </div>
</template>

<script scope>
// import echarts from "echarts";
import { getUseState } from '@/api/echarts'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      unUse: null,
      bindIng: 0,
      usIng: 0,
      zeroData: 0
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getUseState()
  },
  mounted() {
    setTimeout(() => {
      this.drawLine()
    }, 1000)
  },
  methods: {
    getUseState() {
      getUseState().then((res) => {
        this.zeroData = res.data.data[0].value
        this.usIng = res.data.data[1].value
        this.bindIng = res.data.data[2].value
        this.unUse = res.data.data[3].value
        this.drawLine()
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const main1 = this.$echarts.init(document.getElementById('main1'))
      // 绘制图表
      main1.setOption({
        title: {
          text: '使用状态统计',
          // subtext: "Fake Data",
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}(张) ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        color: [
          '#45C2E0',
          '#C1EBDD',
          '#FFC851',
          '#5A5476',
          '#1869A0'
          // "#FF9393",
        ],
        series: [
          {
            name: '张数以及占比',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.unUse, name: '未使用' },
              { value: this.bindIng, name: '帮定中' },
              { value: this.usIng, name: '正常' },
              { value: this.zeroData, name: '零数据' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
